<template>
  <div class="app-container">
    <HKSearchform
      :data="queryParams"
      :field-list="filterInfo.fieldList"
      @handleSearch="handleQuery"
      @handleReset="resetQuery" 
      @handleEvent="handleEvent" 
    />

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
          <el-upload :disabled="!statusFlag" ref="upload" accept=".zip" :limit="1" :action="upload.url" :show-file-list="false" :auto-upload="true" :on-change="handleFileUploadProgress">
              <el-button :disabled="!statusFlag" type="primary"  icon="el-icon-plus" >上传离线包</el-button>
              <div slot="tip" class="el-upload__tip">支持扩展名：.zip</div>
            </el-upload>
      </el-col>
    </el-row>

    <HkTable
      ref="tables"
      :loading="loading"
      :total="total"
      :queryParams="queryParams"
      :tableData="tableList"
      :tableColumns="tableFieldList"
      :showIndex="true"
      @changePage="getListData">
      <template #status="scope">
        <span :style="(statusDict.find(item => item.key == scope.row.status)).style">
          {{ (statusDict.find(item => item.key == scope.row.status)).label }}
        </span>
      </template>
      <template #updateTime="scope">
        <span>{{ parseTime(scope.row.updateTime) }}</span>
      </template>
    </HkTable>
  </div>
</template>

<script>
import HKSearchform from '@/components/HKSearchform/index.vue'
import HkTable from '@/components/HKTable'
import { parseTime } from '@/utils/hongke.js'
import { getRegister, getReceiveList } from '@/api/system/report'

export default {
  name: 'Receive',
  components: { HKSearchform, HkTable },
  data() {
    return {
      //  状态开关：所有操作需基于注册过且不是在线操作
      statusFlag: false,
      // 搜索项配置
      filterInfo: {
        fieldList: [{ label: '关键字', type: 'input', field: 'name' }],
      },
      // 查询参数
      queryParams: {
        current: 1,
        size: 10,
        name: '',
      },
      // 遮罩层
      loading: true,
      // 总条数
      total: 0,
      //  表格数据
      tableList: [],
      //  表格配置项
      tableFieldList: [
        { label: '文件名称', param: 'fileName' },
        { label: '文件状态', param: 'status', type: 'slot' },
        { label: '上传时间', param: 'updateTime', type: 'slot' },
      ],
      //  状态字典
      statusDict: [
        { key: 1, label: '上传完成', style: 'color: #409EFF' },
        { key: 2, label: '处理异常', style: 'color: #F56C6C' },
        { key: 3, label: '处理完成', style: 'color: #67C23A' }
      ],
      // 上传离线包参数
      upload: {
        // 设置上传的请求头部
        // headers: { [TokenKey]: getToken() },
        // 是否禁用上传
        isUploading: true,
        // 上传的地址
        url: 'http://192.168.60.117:19730/report-api/receive',
      },
    }
  },
  mounted() {
    this.getListData()
    this.getRegisterInfo()
  },
  methods: {
    /** 获取注册状态 */
    getRegisterInfo() {
      getRegister().then(res => {
        this.statusFlag = res.id && res.online == '0'
      })
    },
    /** 搜索框绑定事件 */
    handleEvent(obj) {
      this.queryParams[obj.field] = obj.value
    },
    /** 搜索 */
    handleQuery() {
      this.queryParams.current = 1
      this.getListData()
    },
    /** 重置 */
    resetQuery() {
      this.queryParams = {
        current: 1,
        size: 10,
        name: '',
      }
      this.getListData()
    },
    /** 上传 */
    handleFileUploadProgress(file) {
      if (file.status == 'success') {
        this.$message.success('离线包已上传')
        this.getListData()
      }
    },
    /** 获取列表 */
    getListData() {
      getReceiveList(this.queryParams).then((res) => {
        this.tableList = res.list
        this.total = res.total
        this.loading = false
      })
    },
  },
}
</script>

<style lang="scss" scoped>
button.el-button.el-button--primary.is-disabled,
button.el-button.el-button--primary.is-disabled:active {
  color: #FFFFFF !important;
  background-color: #a5b7f7 !important;
  border-color: #a5b7f7 !important;
}
</style>
